// base screen layout, content blocks layout management (columns, flex layout)

body.caerp {
	overflow: hidden;
}

body.caerp .base_layout {
	height: 100vh;
	overflow: hidden;
	width: 100vw;
}

body.caerp>.notification:not(:empty)~.base_layout {
	height: calc(100vh - 3rem);
}

body.caerp .base_content {
	flex: 1 0 auto;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

body.caerp>.notification:not(:empty)~.base_layout .base_content {
	height: calc(100vh - 3rem);
}

body.caerp .main_area {
	flex-basis: calc(100vh - 3.5rem);
	overflow: auto;

	>main {
		min-height: calc(100vh - 3.5rem);
	}
}

body.caerp>.notification:not(:empty)~.base_layout .base_content .main_area {
	flex-basis: calc(100vh - 6.5rem);

	>main {
		min-height: calc(100vh - 6.5rem);
	}
}

body.caerp .layout {
	&.flex {
		display: flex;

		.vertical_align_center {
			align-self: center;
		}

		&.full {
			justify-content: space-between;
		}

		&:last-child>div:nth-last-child(-n + 1) {
			padding-bottom: 0;
		}

		>div:only-child {
			flex: 1 1 100%;
		}
	}

	&.two_cols {
		flex-wrap: wrap;

		>* {
			flex: 1 1 50%;
		}

		>div {
			padding-left: var(--padding-m);
			padding-right: var(--padding-m);
		}

		>div:nth-child(2n) {
			padding-right: 0;
		}

		>div.tab-content:nth-child(2n) {
			overflow-x: hidden;
			padding: var(--padding-m);
		}

		>div:nth-child(2n+1) {
			padding-left: 0;
			&:last-child {
				padding-right: 0;
			}
		}

		&.third {
			>*:nth-child(2n + 1) {
				flex: 0 0 33.3333%;
			}

			>*:nth-child(2n) {
				flex: 0 0 66.6666%;
			}
		}

		&.third_reverse {
			>*:nth-child(2n + 1) {
				flex: 0 0 66.6666%;
			}

			>*:nth-child(2n) {
				flex: 0 0 33.3333%;
			}
		}

		&.quarter {
			>*:nth-child(2n + 1) {
				flex: 0 0 25%;
			}

			>*:nth-child(2n) {
				flex: 0 0 72%;
			}
		}

		&.quarter_reverse {
			>*:nth-child(2n + 1) {
				flex: 0 0 72%;
			}

			>*:nth-child(2n) {
				flex: 0 0 25%;
			}
		}

		&:last-child>div:not(:tab-content):nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	form .layout.two_cols {
		>div {
			padding-left: 0;
		}
	}

	&.three_cols {
		flex-wrap: wrap;

		>* {
			flex-basis: 33.3333%;
		}

		>div {
			padding-right: var(--padding-m);
		}

		>div:nth-child(3n+2) {
			padding-left: var(--padding-m);
		}

		>div:nth-child(3n) {
			padding-left: var(--padding-m);
			padding-right: 0;
		}

		&:last-child>div:nth-last-child(-n + 3) {
			padding-bottom: 0;
		}
	}

	&.four_cols {
		flex-wrap: wrap;

		>* {
			flex-basis: 25%;
		}

		>div {
			padding-left: var(--padding-m);
			padding-right: var(--padding-m);
		}

		>div:nth-child(4n) {
			padding-right: 0;
		}

		>div:nth-child(4n+1) {
			padding-left: 0;
		}

		&:last-child>div:nth-last-child(-n + 4) {
			padding-bottom: 0;
		}
	}

	&.end_button {
		justify-content: space-between;

		.col-content {
			flex: 1 1 calc(100% - 1.125rem - 30px);
		}

		.col-button {
			flex: 0 0 calc(1.125rem + 20px);
			text-align: right;
		}
	}

	.col-md-1 {
		flex-basis: 8.3333%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 12) {
			padding-bottom: 0;
		}
	}

	.col-md-2 {
		flex-basis: 16.6666%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 6) {
			padding-bottom: 0;
		}
	}

	.col-md-3 {
		flex-basis: 25%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 4) {
			padding-bottom: 0;
		}
	}

	.col-md-4 {
		flex-basis: 33.3333%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 3) {
			padding-bottom: 0;
		}
	}

	.col-md-5 {
		flex-basis: 41.6666%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-6 {
		flex-basis: 50%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-7 {
		flex-basis: 58.3333%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-8 {
		flex-basis: 66.6666%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-9 {
		flex-basis: 75%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-10 {
		flex-basis: 83.3333%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-11 {
		flex-basis: 91.6666%;

		&:not(:last-child),
		&:only-child {
			padding-right: var(--padding-m);
		}

		&:nth-last-child(-n + 2) {
			padding-bottom: 0;
		}
	}

	.col-md-12 {
		flex-basis: 100%;
	}

	&.photo_preview {
		align-items: center;

		>div {
			counter-increment: photoCount;
			flex: 0 0 25% !important;
			position: relative;

			img {
				max-width: 100%;
			}

			&::after {
				background: var(--screen-shaded-background-color);
				content: counter(photoCount);
				left: 0;
				line-height: 2em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2em;
			}
		}
	}

	&.flex.pdf_viewer {
		align-items: stretch;
		flex-wrap: nowrap;
		max-height: 100%;
		width: 100%;

		>.preview {
			display: flex;
			overflow: hidden;
			flex-direction: column;
			justify-content: stretch;
			margin-bottom: var(--negative-padding-s);
			max-width: 100%;
			padding: var(--padding-m) var(--padding-s) var(--padding-s);

			>* {
				flex: 0 0 content;
			}

			.document_header {
				align-items: center;
				flex-wrap: wrap;
				padding: var(--padding-s) var(--padding-s) var(--padding-s) 0;

				h4 {
					flex: 0 0 7em;
				}

				.controls {
					flex: 1 1 auto;
				}
			}

			.document_container {
				border: 0 none;
				flex: 1 1 65vh;
				margin-bottom: var(--padding-s);
				max-width: 100%;
				overflow: auto;
				position: relative;

				.page {
					box-shadow: 0 0 5px var(--box-shadow-color);
					margin: var(--padding-s) var(--padding-s) var(--padding-m);
				}
			}
		}

		>div:not(.preview) {
			padding-left: 0;
			width: 100%;
		}

		img {
			width: 100%;
			height: calc(100% - 10px);
			object-fit: contain;
			transform-origin: top left;
		}
	}
}

body.caerp .modal_view {
	.modal_content > .layout.flex.pdf_viewer:only-child {
		margin-right: var(--negative-padding-m);
		padding-top: 0;
		width: calc( 100% + var(--padding-m) );
		> .preview {
			border-top: unset;
			margin-top: 0;
			padding-top: 0;
		}
	}
}

body.caerp .modal_view.size_full {
	.layout.flex.pdf_viewer {
		height: 87vh;

		>.preview {
			max-height: 87vh;
			max-width: 95vw;
		}
	}

	.tab-content .layout.flex.pdf_viewer {
		height: 83vh;

		>.preview {
			max-height: 83vh;
		}
	}

	.modal_content_layout .layout.flex.pdf_viewer {
		height: calc(87vh - 10px - 3em);

		>.preview {
			max-height: calc(87vh - 10px - 3em);
		}
	}

	nav+.modal_content_layout .layout.flex.pdf_viewer {
		height: calc(83vh - 10px - 3em);

		>.preview {
			max-height: calc(83vh - 10px - 3em);
		}
	}
}

body.caerp .modal_view.size_extralarge {
	.layout.flex.pdf_viewer {
		height: 67vh;

		>.preview {
			max-height: 67vh;
			max-width: 95vw;
		}
	}

	.tab-content .layout.flex.pdf_viewer {
		height: 63vh;

		>.preview {
			max-height: 63vh;
		}
	}

	.modal_content_layout .layout.flex.pdf_viewer {
		height: calc(67vh - 10px - 3em);

		>.preview {
			max-height: calc(67vh - 10px - 3em);
		}
	}

	nav+.modal_content_layout .layout.flex.pdf_viewer {
		height: calc(63vh - 10px - 3em);

		>.preview {
			max-height: calc(63vh - 10px - 3em);
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp {
		.modal_view.size_full .layout.flex.pdf_viewer {
			height: 80vh;
		}

		.modal_view.size_extralarge .layout.flex.pdf_viewer {
			height: 60vh;
		}

		.layout.flex.pdf_viewer {
			flex-wrap: wrap;
			overflow-y: auto;
			padding: var(--padding-m) 0 2.5rem;

			.modal_content_layout {
				order: 0;

				.modal_content {
					height: auto;
					overflow-y: visible;
				}

				footer {
					background: var(--screen-background-color);
					bottom: 0;
					left: 0;
					padding-left: var(--padding-m);
					position: absolute;
					right: 0;
					z-index: $abovePopinLayer;
				}
			}

			>.preview {
				border-top: 1px solid var(--border-color);
				margin-top: var(--padding-m);
				order: 1;
				overflow: visible;

				.document_container {
					overflow: visible;
				}
			}
		}
	}

	body.caerp .layout {

		&.flex,
		&.flex.pdf_viewer {
			flex-wrap: wrap;
		}

		&.two_cols.third,
		&.two_cols.third_reverse,
		&.two_cols.quarter,
		&.two_cols.quarter_reverse {

			>div:nth-child(2n + 1),
			>div:nth-child(2n) {
				flex: 1 0 100%;

				&:not(.tab-content) {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}

		&.four_cols {
			>* {
				flex-basis: 50%;
			}

			>div:nth-child(2n) {
				padding-right: 0;

				&::after {
					right: 0;
				}
			}

			>div:nth-child(4n + 3) {
				padding-left: 0;

				&::after {
					left: 0;
				}
			}
		}
	}

	body.caerp .base_layout.layout.flex {
		flex-wrap: nowrap;
	}

	body.caerp .base_content {
		min-height: 100vh;
		height: auto;
	}

	body.caerp .no_tablet {
		display: none;
	}
}

@media (max-width: $mobileWidth ) {
	html {
		overflow-y: auto;
	}

	body.caerp {
		overflow-y: auto;

		.base_layout,
		.base_content {
			min-height: 100vh;
			height: auto;
			overflow-y: visible;
		}

		>.notification:not(:empty)~.base_layout {
			min-height: calc(100vh - 3rem);
			position: relative;
		}

		>.notification:not(:empty)~.base_layout .base_content {
			height: auto;
		}

		.main_area {
			height: auto;
			overflow: visible;
		}

		.layout.flex.pdf_viewer {
			padding: var(--padding-m) 0 2.5rem;
		}

		.modal_view.size_extralarge .layout.flex.pdf_viewer {
			height: 80vh;
		}
	}

	body.caerp .main_area .layout {
		&.flex {
			max-width: calc(100vw - 20px);
		}
	}

	body.caerp .main_area .collapse_content .layout {
		&.flex {
			max-width: calc(100% - 15px);

			>*~* {
				margin-top: var(--padding-m);
			}
		}
	}

	body.caerp .layout {

		&.two_cols,
		&.three_cols,
		&.four_cols {
			>* {
				flex-basis: 100%;
			}

			>div {
				padding-left: 0;
				padding-right: 0;
			}
		}

		.col-md-1 {
			flex-basis: 33.3333%;
		}

		.col-md-2 {
			flex-basis: 50%;
		}

		.col-md-3 {
			flex-basis: 66.6666%;
		}

		.col-md-4,
		.col-md-5,
		.col-md-6,
		.col-md-7,
		.col-md-8,
		.col-md-9,
		.col-md-10,
		.col-md-11 {
			padding-bottom: var(--variable-vertical-padding-m);
			flex-basis: 100%;

			&:not(:last-child),
			&:only-child {
				padding-right: 0;
			}
		}
	}

	body.caerp .totals .layout.two_cols.quarter_reverse {
		max-width: calc(100vw - 40px);

		>div:nth-child(2) {
			.layout.two_cols>* {
				flex-basis: 50%;
			}
		}

		.third_reverse {
			>div {
				flex: 1 1 50% !important;
			}
		}
	}

	body.caerp .no_mobile {
		display: none;
	}
}

body.caerp[class*="instance_"] {
	border-left-width: var(--padding-m);
	border-left-style: solid;

	.base_layout {
		width: calc(100vw - 10px);
	}

	.main_area {
		width: calc(100vw - var(--menu-maxi-width) - var(--padding-m) );
	}
}

body.caerp.menu_mini[class*="instance_"] .main_area {
	width: calc(100vw - var(--menu-mini-width) - var(--padding-m) );
}

body.caerp.instance_1 {
	border-left-color: $instance1;
}

body.caerp.instance_2 {
	border-left-color: $instance2;
}

body.instance_3 {
	border-left-color: $instance3;
}

body.instance_4 {
	border-left-color: $instance4;
}

body.instance_5 {
	border-left-color: $instance5;
}
